<template>
  <div>
    <!-- <button @click="emits('update:modelValue',123)">按钮</button> -->
    <input v-model="iptValue" />
    <input v-model="titleValue" />
    <!-- 下面两种效果是一样的，第二种写法是第一种写法的语法糖 -->
    <input v-model="ValueIpt" />
    <input :value="ValueIpt" @input="ValueIpt = $event.target.value" />
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from "vue";
const emits = defineEmits(["update:modelValue", "update:title"]);
const Props = defineProps({
  modelValue: String,
  title: String,
});
const iptValue = computed({
  get() {
    return Props.modelValue;
  },
  set(value) {
    console.log(value, "000");
    emits("update:modelValue", value);
  },
});
const titleValue = computed({
  get() {
    return Props.title;
  },
  set(value) {
    emits("update:title", value);
  },
});

const ValueIpt = ref(0);
watchEffect(() => {
  console.log(ValueIpt.value, "5659966");
});
</script>

<style scoped></style>
